<template>
	<view v-if="isloading">
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="height" tabWidth="200"
			widthLine="88rpx" />

		<!-- <view class="msg-box" v-show="tabIndex == 0 "> -->
		<view class="msg-box" v-for="(item,index2) in tabs" :key="index2" v-show="tabIndex == index2 ">

			<view class="msg-list" v-if="data[tabList[tabIndex]].length > 0">
				<view class="msg-item" v-for="(item,index) in data[tabList[tabIndex]]" :key="index">
					<view class="msg-text" @click="toDetail(item)">
						<view class="text-title">{{item.title}}</view>
					<!-- 	<view class="text-content">
							{{item.description}}
						</view> -->
						<view class="text-time">{{ $u.timeFormat(item.create_time, 'yyyy-mm-dd') }}</view>
					</view>
					<view class="msg-img" v-if="item.pic">
						<base-image
							:list="item.pic"
							height="160rpx" width="200rpx" mode="aspectFill" />
					</view>
				</view>
			</view>

		</view>
		
		<view class="msg-list"
			v-if="data[tabList[tabIndex]].length == 0 && (loadType[tabList[tabIndex]] == 4 || loadType[tabList[tabIndex]] == 3) "
			style="padding-top: 20vh;padding-bottom: 20vh;">
			<u-empty textSize="30rpx" iconSize="100rpx" mode="message"
				:icon="emptyIcon" :text="text"></u-empty>
		</view>

		<sk-loading :loadType="loadType[tabList[tabIndex]]"></sk-loading>

	</view>
</template>

<script>
	import msgService from '@/service/msg/MsgService.js'
	import {getBottomBar} from '@/common/utils/rank.js'
	export default {

		data() {
			return {
				emptyIcon:this.$server.imgBaseURL+'/static/wechat/images/empty_message.png',

				height: 80,
				// tabs: [{name:'政治解读',type:'0'}, {name:'通知公告',type:'1'}, {name:'园区咨询',type:'2'}, {name:'新闻咨询',type:'3'}],
				tabs: [],
				tabList: [], //下列对象中的属性
				tabIndex: 0, // tab下标
				// 数据集
				data: {},
				// 当前页
				current: {},
				// 最后一页
				last: {},
				// 加载提醒
				loadType: {}, // ["数据加载中","数据加载完毕","-没有更多了-","加载失败","暂无数据"]
	
				text: '暂无资讯',
				isFirst:true, // 是否第一次打开
				
				isloading:false,// 是否初始化完成
			};
		},
		async onLoad(e) {
			await this.getCatagory()
			// console.log('onLoad',this.tabs)
		},
		async onShow() {
			// 不是第一次加载页面 就不用加载分类 只需要加载列表
			if(!this.isFirst){
				if(getApp().globalData.msgIndex){
					const name = getApp().globalData.msgIndex //获取到传参
					getApp().globalData.msgIndex = undefined
					const index =this.tabs.findIndex(i => i.class_name == name)
					if(index > -1){
						this.tabIndex = index
						await this.getList()
					}
				}
			}
				
			
			
		},
		// 下拉刷新
		async onPullDownRefresh() {
			uni.stopPullDownRefresh();
			await this.reset(this.tabList[this.tabIndex])
			setTimeout(await this.getList, 500);
		},
		//页面滚动到底部的事件
		async onReachBottom() {
			uni.$u.throttle(this.ReachBottom, 500)
		},
		methods: {
			// 页面滚动到底部的事件 
			ReachBottom(){
				if (this.current[this.tabList[this.tabIndex]] < this.last[this.tabList[this.tabIndex]]) {
					this.current[this.tabList[this.tabIndex]] += 1
					this.loadType[this.tabList[this.tabIndex]] = 0
					this.getList(this.current[this.tabList[this.tabIndex]])
				} else {
					this.loadType[this.tabList[this.tabIndex]] = 2
				}
			},
			// 获取分类数据
			async getCatagory() {
				try{
					const res = await msgService.catagory()
					const tabList = []
					res.data.data.forEach(item => {
						item.name = item.class_name
						tabList.push(item.class_name)
					})
					
					// 初始化数据对象
					if(tabList.length > 0){
						tabList.forEach(item => {
							//给对象动态添加属性（响应式）
							this.$set(this.data, item , new Array);
							this.$set(this.current, item , 0);
							this.$set(this.last, item , 0);
							this.$set(this.loadType, item , 0);
						})
					}else{
						// 当没有分类数据时 保底处理
						this.$set(this.data, 'none' , new Array);
						this.$set(this.current, 'none' , 0);
						this.$set(this.last, 'none' , 0);
						this.$set(this.loadType, 'none' , 4);
						tabList.push('none')
					}
					// 数据对象的keys 用于后续去数据对象中取值(一维)
					this.tabList = tabList
					// 判断分类长度 不为零就查询列表
					if(res.data.data.length > 0){
						this.tabs = res.data.data
						const name = getApp().globalData.msgIndex //获取到传参
						getApp().globalData.msgIndex = undefined
						const index =this.tabs.findIndex(i => i.class_name == name)
						if(index > -1){
							this.tabIndex = index
						}
						await this.getList()
						// 下次不需要在加载分类
						this.isFirst = false
					}
					// 初始化完成
					this.isloading = true
					
				}catch{
					this.text = "加载失败,请稍后在试"
					this.data[this.tabList[this.tabIndex]] = []
					this.loadType[this.tabList[this.tabIndex]] = 3
				}
				
			},
			// 获取数据 num 第几页 type 分类
			async getList(num = 1) {
				try {
					const res = await msgService.list({
						page: num,
						class_type: this.tabs[this.tabIndex].class_type,
						class_id: this.tabs[this.tabIndex].class_id
					})
					if (num == 1) {
						this.reset(this.tabList[this.tabIndex])
					}
					this.data[this.tabList[this.tabIndex]] = this.data[this.tabList[this.tabIndex]].concat(res.data
						.data)
					this.current[this.tabList[this.tabIndex]] = res.data.current_page
					this.last[this.tabList[this.tabIndex]] = res.data.last_page
					if (res.data.current_page < res.data.last_page) {
						this.loadType[this.tabList[this.tabIndex]] = 1
					} else {
						this.loadType[this.tabList[this.tabIndex]] = 2
					}
					if (this.data[this.tabList[this.tabIndex]].length == 0) this.loadType[this.tabList[this
						.tabIndex]] = 4
				} catch {
					this.text = "加载失败,请稍后在试"
					this.data[this.tabList[this.tabIndex]] = []
					this.loadType[this.tabList[this.tabIndex]] = 3
				}
			},
			// 重置数据
			reset(str) {
				this.data[str] = []
				this.current[str] = 0
				this.last[str] = 0
				this.loadType[str] = 0
			},
			// 切换菜单
			tabChange(e) {	
				console.log('切换菜单')
				// getApp().globalData.msgIndex = this.tabIndex
				if (this.data[this.tabList[this.tabIndex]].length == 0) {
					this.getList()
				}

			},
			// 跳转详情页
			toDetail(item) {
				const url = "/packageMsg/pages/msg/detail?content_id=" + item.content_id
				uni.navigateTo({
					url: url,
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FBFBFB;
	}

	.top-warp .tip {
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.msg-box {
		padding: 20rpx;

		.msg-list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 40rpx;

			.msg-item {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px dashed #ccc;
				padding: 20rpx 0;
				width: 100%;
				min-height: 120rpx;
				&:last-child {
					border-bottom: 0;
				}

				.msg-text {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.text-title {
						// width: 380rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #4a4a4a;
						line-height: 48rpx;
						
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						
						text-overflow: -o-ellipsis-lastline;
						word-break: break-all;
						overflow: hidden;				//溢出内容隐藏
						text-overflow: ellipsis;		//文本溢出部分用省略号表示
						display: -webkit-box;			//特别显示模式
						-webkit-line-clamp: 3;			//行数
						line-clamp: 3;					
						-webkit-box-orient: vertical;	//盒子中内容竖直排列
					}

					.text-content {
						height: 36px;
						width: 400rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #878787;
						line-height: 36rpx;

						text-overflow: -o-ellipsis-lastline;
						word-break: break-all;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}

					.text-time {
						float: right;
						font-size: 24rpx;
						color: rgb(153, 153, 153);
						line-height: 34rpx;
						padding-top: 10rpx;
					}
				}

				.msg-img {
					padding-left: 20rpx;
			}
				}
		}
	}
</style>
